<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- TODO 引入headFragment模板-->
<head th:replace="/sys/base :: headFragment(~{::title},~{::link},~{::style})">
    <title>SNOOB用户登陆</title>
    <style>
        .layui-layout-login .login-bg {
            background-color: #e7e7e7;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
        }

        .layui-layout-login .login-bg .cover {
            background-color: #009688;
            height: 50%;
        }

        .layui-layout-login .login-content {
            width: 250px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #ffffff;
            padding: 40px;
            padding-top: 32px;
            -webkit-box-shadow: 0px 3px 20px 3px rgba(0, 0, 0, 0.15);
            box-shadow: 0px 3px 20px 3px rgba(0, 0, 0, 0.15);
        }

        .layui-layout-login .login-content.captcha {
            width: 300px;
            padding-bottom: 38px;
        }

        .layui-layout-login .login-content.captcha .captcha-item .layui-icon {
            font-size: 16px;
        }

        .layui-layout-login .login-content.captcha .captcha-item .layui-input {
            float: left;
            width: 180px;
        }

        .layui-layout-login .login-content.captcha .captcha-item .captcha-img {
            float: right;
            height: 38px;
            cursor: pointer;
        }

        .layui-layout-login .login-box-title {
            font-size: 26px;
            margin-bottom: 20px;
            text-align: center;
            color: #444444;
        }

        .layui-layout-login .layui-form-item {
            position: relative;
            margin-bottom: 20px;
            min-height: 18px;
        }

        .layui-layout-login .layui-form-item label {
            position: absolute;
            top: 0;
            left: 0;
            font-size: 18px;
            width: 38px;
            line-height: 38px;
            text-align: center;
            color: #999999;
        }

        .layui-layout-login .layui-form-item input[type=text],
        .layui-layout-login .layui-form-item input[type=password] {
            padding-left: 36px;
            border: 1px solid #ddd;
            transition: all 0s;
            -webkit-transition: all 0s;
        }

        .layui-layout-login .layui-form-item .layui-form-checkbox {
            margin-top: 0;
        }

        .layui-layout-login .layui-form-item .layui-form-checkbox .layui-icon {
            width: 14px;
            height: 14px;
            top: 1px;
            line-height: 14px;
        }

        .layui-layout-login .layui-form-item .layui-form-checkbox[lay-skin=primary]:hover i {
            border-color: #009688;
        }

        .layui-layout-login .layui-form-item .layui-form-checked[lay-skin=primary] i {
            border-color: #009688;
            background-color: #009688;
        }

        .layui-layout-login .layui-form-item .forget-password {
            color: #009688;
        }
    </style>
</head>

<body class="layui-layout-login">
<div class="login-bg">
    <div class="cover"></div>
</div>
<div class="login-content captcha">
    <h1 class="login-box-title"><i class="fa fa-fw fa-user"></i>登录</h1>
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-icon layui-icon-username" for="account"></label>
            <input class="layui-input" type="text" name="account" id="account" autocomplete="off" placeholder="用户名"
                   lay-verify="required">
        </div>
        <div class="layui-form-item">
            <label class="layui-icon layui-icon-password" for="pass"></label>
            <input class="layui-input" type="password" name="pass" id="pass" autocomplete="off" placeholder="密码"
                   lay-verify="required|pass">
        </div>
        <div class="layui-form-item captcha-item">
            <label class="layui-icon layui-icon-vercode"></label>
            <input class="layui-input" type="text" name="verifyCode" id="verifyCode" autocomplete="off"
                   placeholder="验证码" lay-verify="required|verifyCode"/>
            <img class="captcha-img" id="verifyCodeImg" style="border-radius:4px;vertical-align:middle;"
                 onclick="loadVerifyCodeImg()"/>
        </div>
        <div class="layui-form-item">
            <!--<input type="checkbox" name="rememberMe" title="记住我" lay-skin="primary">-->
            <a class="layui-layout-right forget-password" onclick="openSysModifyDialog('忘记密码','/sys/admin/toForgetPass','520,360')">忘记密码</a>
        </div>
        <button type="submit" class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">
            <i class="fa fa-sign-in fa-lg fa-fw"></i>登录
        </button>
    </form>
</div>

<!-- TODO 引入scriptFragment模板 -->
<script th:replace="/sys/base :: scriptFragment"></script>
<!-- TODO RSA非对称加密 -->
<script th:src="@{/static/js/encrypt/jsencrypt.min.js}" charset="utf-8"></script>

<script th:inline="javascript">
    //window.parent 获取上一级的window对象，如果还是iframe则是该iframe的window对象
    //window.top 获取最顶级容器的window对象，即打开页面的文档
    //window.self 返回自身window的引用。可以理解 window===window.self(脑残)
    if (window.top !== window.self) {
        window.top.location = window.location;
    }

    function loadVerifyCodeImg() { // TODO 加载验证码图片
        $("input[name='verifyCode']").val(null);
        $("#verifyCodeImg").prop("src", $.getProjectNameLI() + "/sys/admin/verifyCode?time=" + new Date().getMilliseconds());
    }
    loadVerifyCodeImg();

    layui.use('form', function () {
        // 表单对象
        var form = layui.form;

        // 自定义表单校验规则:
        // 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$
        // 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$
        // 强密码(必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
        form.verify({
            pass: [
                /^[a-zA-Z]\w{5,9}$/,
                '以字母开头，长度在6~10之间，只能包含字母、数字和下划线'
            ],
            verifyCode: [
                /^[A-Za-z0-9]{4}$/,
                '由字母、数字组成的4位有效字符串'
            ]
        });

        //提交表单
        form.on('submit(login)', function (formData) {
            var loadIndex = layer.load();
            // 表单字段
            var account = formData.field.account;
            var pass = $.encryptRasLI(formData.field.pass); // 按照公钥加密
            var verifyCode = formData.field.verifyCode;
            //
            $.ajax({
                async: false,
                url: $.getProjectNameLI() + "/sys/admin/login", // TODO 相对路径必须与WebSecurityConfig中的loginProcessingUrl参数一至
                type: 'post',
                dataType: "json",
                data: {
                    account: account, // TODO account字段名称必须与WebSecurityConfig中的usernameParameter参数值一至
                    pass: pass, // TODO pass字段名称必须与WebSecurityConfig中的passwordParameter参数值一至
                    verifyCode: verifyCode
                }
                ,success: function (res) {
                    layer.close(loadIndex);
                    if (res.code > 0) {
                        layer.msg(res.message, {time: 1000}, function () {
                            loadVerifyCodeImg();
                        });
                    } else {
                        layer.msg(res.data, {time: 500}, function () {
                            window.location.replace($.getProjectNameLI() + "/sys/admin/index"); // 登陆成功，跳转到后台
                        });
                    }
                }
                ,error: function (xhr) {
                    layer.msg("系统繁忙，稍后重试",function (e) {
                        loadVerifyCodeImg();
                    });
                }
            });
            return false; // 阻止表单提交
        });
    });

</script>

</body>
</html>